<template>
  <div>
    <!-- 头部 -->
    <div class="compHeader">
      <div class="main">
        <div class="header_l">
          <a href="index.html">
            <img src="@/assets/images/logo_1.png" alt="Logo 1" />
            <img src="@/assets/images/logo_2.png" alt="Logo 2" />
          </a>
          <span>www.xxx.com</span>
        </div>
        <div class="header_c">
          <input type="text" placeholder="请输入关键字..." class="keyword" />
          <input type="button" class="btnsearch" />
        </div>
        <div class="header_r">
          <a href="login.html">个人登录</a>
          <a href="register.html">注册</a>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="jobtypeBox">
      <div class="DivLeft">
        <div class="DivCompany">
          <div class="DivCompany_img">
            <img src="@/assets/images/company.gif" alt="Company" width="180" />
          </div>
          <h1>
            <a href="#">{{enterpriseData.enterpriseName}}</a>
            <img src="@/assets/images/16.png" alt="Icon" />
          </h1>
          <div class="clear"></div>
          <div class="DivLeft_2">
            <p>行业：{{industryData.industryName}}</p>
            <p>性质：{{enterpriseData.nature}}</p>
            <p>规模：{{enterpriseData.size}}</p>
            <p>企业主页：<a href="">http://www.**********.com</a></p>
            <p>详细地址：{{enterpriseData.address}}</p>
            <p>
              {{enterpriseData.introduce}}
            </p>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="DivRight">
        <div class="DivRight_2">
          <div class="divJob_1">
            <div class="divJob_l">
              <div class="tit">
                <h2>{{}}</h2>
                <div class="clear"></div>
              </div>
              <div class="bqbox">
                <label>年终奖</label>
                <label>节日福利</label>
                <label>双休</label>
                <label>8小时工作制</label>
                <label>带薪年假</label>
                <label>交通补贴</label>
                <div class="clear"></div>
              </div>
              <div class="jobsub">工作地点：{{jobData.workSpace}} </div>
              <div class="jobsub">职位月薪： {{jobData.minSalary}}K -{{jobData.maxSalary}}K </div>
              <div class="jobsub">招聘人数： {{jobData.needNumber}}人</div>
              <div class="jobsub">最低学历： {{jobData.minDegree}}</div>
              <div class="jobsub">年龄要求： {{jobData.limitAge}}岁及以上</div>
              <div class="jobsub">工作经验： {{jobData.experience}}</div>
              <div class="jobsub">招聘方式： {{jobData.jobNature}}</div>
              <div class="jobsub">发布时间： {{jobData.updateTime}}</div>
            </div>
          </div>
          <div class="clear"></div>
          <div class="divJob_2">
  <div
    class="divJob_2_1"
    :class="{ disabled: applyStatus.disabled }"
    @click="apply"
  >
    {{ applyStatus.text }}
  </div>
</div>
          <div class="clear"></div>
          <div class="divJob_3">
            <b>岗位要求：</b><br />
            <div class="con">
             {{jobData.jobDetails}}
            </div>
            
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="clear"></div>
    <div class="footer"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getWorkDetail } from "@/api/jobid.js";
import { onMounted } from "vue";
import { getEnterpriseInfo } from "@/api/enterprise.js";
import { getIndustryById } from "@/api/industry.js";
import { applyJob } from "@/api/applyjob.js";
import { ElMessage } from 'element-plus'

//获取路由对象
const route = useRoute();
//获取路由参数id
const jobId = route.params.id;
//console.log("jobid:",jobId)

//定义响应式数据
const jobData = ref([]);
//存储企业信息
const enterpriseData = ref([]);
//存储行业信息
const industryData = ref([]);

//转换工作数据
const transformJobData = (jobData) =>{
//转换工作地点
const workSpace = ['北京','上海','广州','深圳'];
jobData.value.workSpace = workSpace[jobData.value.workSpace]
//转换学历
const minDegree = ['专科','本科','硕士','博士'];
jobData.value.minDegree = minDegree[jobData.value.minDegree]
//转换工作经验
const experience = ['有经验','不限'];
jobData.value.experience = experience[jobData.value.experience]
//转换招聘方式
const jobNature = ['全职','兼职','实习'];
jobData.value.jobNature = jobNature[jobData.value.jobNature]

}


//转化企业数据
const transformEnterpriseData = (enterpriseData) =>{

const nature = ['非国企','国企'];
enterpriseData.value.nature = nature[enterpriseData.value.nature]
//转换企业规模
const size = ['未知','中型','大型']
enterpriseData.value.size = size[enterpriseData.value.size]
}




//转换时间戳
const time = (jobData) =>{

const date = new Date(jobData.value.updateTime)
 
 jobData.value.updateTime = date.toLocaleString()


}





//定义获取职位详情的方法
const getJobDetail = async(jobId)=>{

const result = await getWorkDetail(jobId)

jobData.value = result.data.data.items[0];
//console.log("经验:", jobData.value.experience)

transformJobData(jobData);
time(jobData)

//定义获取公司信息的方法
const getCompanynfo = async () => {

const result = await getEnterpriseInfo(jobData.value.enterpriseId)

enterpriseData.value = result.data.data.items[0]

transformEnterpriseData(enterpriseData)
//console.log("size:", enterpriseData.value)


//console.log("enterpriseData:", enterpriseData.value)
}
getCompanynfo()



//定义获取行业信息的方法
const getIndustry = async () => {

const result = await getIndustryById(jobData.value.industryId)

industryData.value = result.data.data.items[0]


}
getIndustry()


}



// 页面加载时自动调用
onMounted(() => {
  getJobDetail(jobId)
})
//console.log("hhhhhhhhhhhhhhhhhhhh:", jobData.value.workSpace)
//console.log("jobData:", jobData.value)

/**申请职位 */
/* const apply = () =>{

const  apply = applyJob(jobId).then(result =>{
  
    console.log("shenq",result.data.code)
  
})

} */
//申请按钮的状态信息
const applyStatus = ref({
  text: "立即申请",
});

const apply = async () => {
    try {
       // 禁用按钮，防止重复点击
    applyStatus.value.disabled = true;

        let result = await applyJob(jobId); // 使用 await 等待 Promise 完成
        if(result.data.code === 0){
          ElMessage.success("申请成功");
          applyStatus.value.text = "已申请"; // 更新按钮文本
      
        }
        else{
            ElMessage.error(result.data.message)
             applyStatus.value.text = "已申请"; // 恢复按钮文本
      //applyStatus.value.disabled = false; // 恢复按钮状态
        }
    } catch (error) {
        console.error("申请失败:", error);
         applyStatus.value.text = "立即申请"; // 恢复按钮文本
    //applyStatus.value.disabled = false; // 恢复按钮状态
    }
}






</script>

<style scoped>
/* 引入外部CSS文件 */
@import url("@/assets/css/company.css");

/* 如果需要额外的样式，可以在这里添加 */
.clear {
  clear: both;
}


</style>